<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漂流广场 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <h1 class="header-title">漂流广场</h1>
            <div class="flex items-center">
                <div class="text-xs text-neutral-600 mr-3" id="drawCounter">
                    今日剩余 5 次
                </div>
                <button class="header-action" onclick="window.location.href='daily-featured.html'">
                    <i class="fas fa-star"></i>
                </button>
            </div>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <!-- Draw Card -->
            <div class="card card-gradient mb-6 text-center">
                <div class="mb-4">
                    <div class="inline-block w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-3">
                        <i class="fas fa-paper-plane text-3xl text-white"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">捡到漂流瓶</h3>
                    <p class="text-sm opacity-90">发现一份来自陌生人的真诚心情</p>
                </div>
                <button id="drawBtn" class="btn btn-outline w-full" style="color: white; border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1);">
                    <i class="fas fa-hand-paper mr-2"></i>
                    随机抽取一篇日记
                </button>
            </div>

            <!-- Drift Content -->
            <div id="driftContent">
                <!-- Empty State -->
                <div id="emptyState" class="text-center py-12">
                    <div class="w-24 h-24 bg-neutral-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                        <i class="fas fa-compass text-2xl text-neutral-400"></i>
                    </div>
                    <h3 class="font-semibold text-neutral-700 mb-2">开始探索</h3>
                    <p class="text-sm text-neutral-500 mb-6">点击上方按钮，随机发现一篇温暖的心情日记</p>
                    <div class="bg-primary-50 rounded-lg p-4 text-left">
                        <h4 class="font-medium text-primary mb-2">💡 漂流规则</h4>
                        <ul class="text-xs text-neutral-600 space-y-1">
                            <li>• 每日限制抽取5次，珍惜每次相遇</li>
                            <li>• 所有日记都经过隐私保护处理</li>
                            <li>• 给予暖心点评可获得暖心币奖励</li>
                            <li>• 优质点评有机会登上每日精选</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Quick Actions (when no diary is shown) -->
            <div id="quickActions" class="grid grid-cols-2 gap-4 mb-6">
                <button onclick="window.location.href='daily-featured.html'" class="card card-hover text-center">
                    <i class="fas fa-star text-2xl text-warning-500 mb-2"></i>
                    <div class="font-medium text-sm">每日精选</div>
                    <div class="text-xs text-neutral-500">高质量内容推荐</div>
                </button>
                <button onclick="window.location.href='home.html'" class="card card-hover text-center">
                    <i class="fas fa-pen text-2xl text-primary mb-2"></i>
                    <div class="font-medium text-sm">写日记</div>
                    <div class="text-xs text-neutral-500">分享你的心情</div>
                </button>
            </div>

            <!-- Statistics -->
            <div class="card">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-chart-pie mr-2 text-primary"></i>
                    漂流统计
                </h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="text-center">
                        <div class="text-xl font-bold text-primary mb-1">1,234</div>
                        <div class="text-xs text-neutral-500">今日漂流</div>
                    </div>
                    <div class="text-center">
                        <div class="text-xl font-bold text-secondary mb-1">5,678</div>
                        <div class="text-xs text-neutral-500">暖心点评</div>
                    </div>
                    <div class="text-center">
                        <div class="text-xl font-bold text-warning-500 mb-1">89%</div>
                        <div class="text-xs text-neutral-500">积极情绪</div>
                    </div>
                    <div class="text-center">
                        <div class="text-xl font-bold text-success-500 mb-1">4.8</div>
                        <div class="text-xs text-neutral-500">平均暖心度</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="bottom-nav">
            <a href="home.html" class="nav-item" data-page="home">
                <i class="fas fa-home nav-icon"></i>
                <span class="nav-label">树洞</span>
            </a>
            <a href="drift.html" class="nav-item active" data-page="drift">
                <i class="fas fa-compass nav-icon"></i>
                <span class="nav-label">漂流</span>
            </a>
            <a href="profile.html" class="nav-item" data-page="profile">
                <i class="fas fa-heart nav-icon"></i>
                <span class="nav-label">暖心</span>
            </a>
            <a href="store.html" class="nav-item" data-page="store">
                <i class="fas fa-gift nav-icon"></i>
                <span class="nav-label">商城</span>
            </a>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 漂流页面专用功能
        class DriftPageManager {
            constructor() {
                this.drawCount = 0;
                this.maxDraws = 5;
                this.currentDiary = null;
                this.init();
            }

            init() {
                this.bindEvents();
                this.updateDrawCounter();
                this.loadDraftHistory();
            }

            bindEvents() {
                const drawBtn = document.getElementById('drawBtn');
                if (drawBtn) {
                    drawBtn.addEventListener('click', this.handleDraw.bind(this));
                }
            }

            updateDrawCounter() {
                const counter = document.getElementById('drawCounter');
                if (counter) {
                    const remaining = this.maxDraws - this.drawCount;
                    counter.textContent = `今日剩余 ${remaining} 次`;
                    
                    if (remaining <= 0) {
                        counter.style.color = 'var(--error-500)';
                    } else if (remaining <= 2) {
                        counter.style.color = 'var(--warning-500)';
                    }
                }
            }

            async handleDraw() {
                if (this.drawCount >= this.maxDraws) {
                    App.utils.showToast('今日抽取次数已用完，明天再来吧~', 'info');
                    return;
                }

                const drawBtn = document.getElementById('drawBtn');
                
                // 显示加载状态
                drawBtn.disabled = true;
                drawBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>寻找漂流瓶中...';

                // 模拟网络请求
                await new Promise(resolve => setTimeout(resolve, 1500));

                this.drawCount++;
                this.updateDrawCounter();

                // 随机选择一篇日记
                const diaries = [
                    {
                        id: 'drift001',
                        content: '今天收到了一个意外的好消息，感觉整个世界都亮了起来！虽然之前一直很担心，但是结果比预期的还要好。生活真的充满了惊喜，要学会相信美好的事情会发生。',
                        mood: '🎉',
                        timestamp: Date.now() - 1800000,
                        anonymousId: '匿名用户A',
                        heartsCount: 15,
                        warmthScore: 4.8
                    },
                    {
                        id: 'drift002',
                        content: '失恋了，但是朋友们都在安慰我，感觉还是很幸福的。虽然心情很低落，但是有这么多人关心我，让我觉得并不孤单。也许这就是成长的代价吧。',
                        mood: '💔',
                        timestamp: Date.now() - 7200000,
                        anonymousId: '匿名用户B',
                        heartsCount: 23,
                        warmthScore: 4.2
                    },
                    {
                        id: 'drift003',
                        content: '第一次独自旅行，虽然有些紧张但更多的是兴奋。看到了很多美丽的风景，遇到了有趣的人。这次旅行让我学会了独立，也让我更加热爱生活。',
                        mood: '✈️',
                        timestamp: Date.now() - 3600000,
                        anonymousId: '匿名用户C',
                        heartsCount: 18,
                        warmthScore: 4.6
                    },
                    {
                        id: 'drift004',
                        content: '今天陪奶奶去医院体检，看着她慢慢变老的样子很心疼。想要多陪陪她，珍惜和家人在一起的时光。时间过得太快了，要更加珍惜身边的人。',
                        mood: '🥺',
                        timestamp: Date.now() - 5400000,
                        anonymousId: '匿名用户D',
                        heartsCount: 31,
                        warmthScore: 4.9
                    }
                ];

                const randomIndex = Math.floor(Math.random() * diaries.length);
                this.currentDiary = diaries[randomIndex];

                this.displayDiary(this.currentDiary);
                
                // 恢复按钮状态
                drawBtn.disabled = false;
                drawBtn.innerHTML = '<i class="fas fa-hand-paper mr-2"></i>再抽一篇';

                App.utils.showToast('捡到一个漂流瓶！', 'success');
                
                // 隐藏空状态和快捷操作
                document.getElementById('emptyState').style.display = 'none';
                document.getElementById('quickActions').style.display = 'none';
            }

            displayDiary(diary) {
                const container = document.getElementById('driftContent');
                if (!container) return;

                const warmthStars = this.generateStars(diary.warmthScore);

                container.innerHTML = `
                    <div class="card animate-fadeInUp mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <span class="mood-emoji">${diary.mood}</span>
                                <div>
                                    <div class="text-sm font-medium text-neutral-700">${diary.anonymousId}</div>
                                    <div class="text-xs text-neutral-500">${App.utils.formatTime(diary.timestamp)}</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="warmth-stars mb-1">
                                    ${warmthStars}
                                </div>
                                <div class="text-xs text-neutral-500">暖心度</div>
                            </div>
                        </div>
                        
                        <p class="text-base leading-relaxed text-neutral-700 mb-4">${diary.content}</p>
                        
                        <div class="bg-neutral-50 rounded-lg p-3 mb-4">
                            <div class="flex items-center text-xs text-neutral-500 mb-2">
                                <i class="fas fa-shield-alt mr-1"></i>
                                <span>此内容已通过隐私计算处理，保护原作者隐私</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="warmth-indicator">
                                <i class="fas fa-heart icon-sm text-secondary"></i>
                                <span class="text-sm">${diary.heartsCount}</span>
                            </div>
                            <div class="flex gap-2">
                                <button onclick="driftManager.handleLike()" class="btn btn-sm btn-outline">
                                    <i class="fas fa-thumbs-up icon-sm"></i>
                                    默默祝福
                                </button>
                                <button onclick="driftManager.handleComment()" class="btn btn-sm btn-primary">
                                    <i class="fas fa-comment icon-sm"></i>
                                    暖心点评
                                </button>
                                <button onclick="driftManager.handleSkip()" class="btn btn-sm btn-text">
                                    <i class="fas fa-forward icon-sm"></i>
                                    换一个
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            }

            generateStars(score) {
                const fullStars = Math.floor(score);
                const hasHalfStar = score % 1 >= 0.5;
                let stars = '';

                for (let i = 0; i < 5; i++) {
                    if (i < fullStars) {
                        stars += '<i class="fas fa-star warmth-star text-xs"></i>';
                    } else if (i === fullStars && hasHalfStar) {
                        stars += '<i class="fas fa-star-half-alt warmth-star text-xs"></i>';
                    } else {
                        stars += '<i class="far fa-star text-neutral-300 text-xs"></i>';
                    }
                }

                return stars;
            }

            handleLike() {
                if (this.currentDiary) {
                    this.currentDiary.heartsCount++;
                    if (window.App) {
                        App.data.user.currency += 2;
                        App.utils.showToast('送出了温暖的祝福 +2 暖心币', 'success');
                    }
                    this.displayDiary(this.currentDiary);
                }
            }

            handleComment() {
                if (this.currentDiary) {
                    // 跳转到点评页面
                    window.location.href = `comment.html?diary=${this.currentDiary.id}`;
                }
            }

            handleSkip() {
                if (this.drawCount < this.maxDraws) {
                    this.handleDraw();
                } else {
                    App.utils.showToast('今日抽取次数已用完', 'info');
                }
            }

            loadDraftHistory() {
                // 从本地存储加载今日抽取次数
                const today = new Date().toDateString();
                const lastDrawDate = localStorage.getItem('lastDrawDate');
                const savedDrawCount = parseInt(localStorage.getItem('drawCount') || '0');

                if (lastDrawDate === today) {
                    this.drawCount = savedDrawCount;
                } else {
                    this.drawCount = 0;
                    localStorage.setItem('lastDrawDate', today);
                    localStorage.setItem('drawCount', '0');
                }

                this.updateDrawCounter();
            }

            saveDraftHistory() {
                localStorage.setItem('drawCount', this.drawCount.toString());
            }
        }

        // 初始化页面
        let driftManager;
        document.addEventListener('DOMContentLoaded', function() {
            driftManager = new DriftPageManager();
            
            // 页面卸载时保存状态
            window.addEventListener('beforeunload', function() {
                if (driftManager) {
                    driftManager.saveDraftHistory();
                }
            });
        });
    </script>

    <style>
        /* 网格布局 */
        .grid {
            display: grid;
        }

        .grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fadeInUp {
            animation: fadeInUp 0.5s ease forwards;
        }

        /* 响应式调整 */
        @media (max-width: 640px) {
            .grid-cols-2 {
                gap: 0.75rem;
            }
            
            .btn-sm {
                font-size: 0.75rem;
                padding: 0.375rem 0.75rem;
            }
        }

        /* 列表间距 */
        .space-y-1 > * + * {
            margin-top: 0.25rem;
        }
    </style>
</body>
</html>
